<template>

	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">课程列表</block>
		</cu-custom>
		<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" :top='140'>
			<view class="cu-card">
				<view class="cu-item bg-img shadow-blur" v-for="(item,index) in courseList" :key="index" @tap="selectCourse(item.id,'DialogModal1')">
					<view class="flex  p-xs  mb-sm grid-square">
						<image :src="item.imgUrl" mode="aspectFit" class="flex-sub margin-xs" style="height: 145px!important;margin:auto;padding-left: 10px;"></image>
						<view class="flex-twice">
							<view>
								<view class="flex solid-bottom padding align-start">课程名:{{item.title}}</view>
								<view class="flex solid-bottom padding align-center">简介:{{item.content}}</view>
								<view class="flex solid-bottom padding align-end">
									老师:{{item.teacher}} 开课时间:{{item.startTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex padding-xs">
						<view class="cu-progress round">
							<view :class="item.progress>80?'bg-blue':item.progress>60?'bg-green':item.progress>30?'bg-orange':'bg-red'"
							 :style="[{ width:loading?item.progress+'%':''}]">{{item.progress}}%</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">注意事项</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					你真的要选这门课吗?
					<br />
					<text>每人限选一门课</text>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="yes">确定</button>

					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='TimeError'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">警告</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					当前未到开始时间!<br />开始时间为{{startTime}}
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollUni from "../../components/mescroll-uni/mescroll-uni.vue";
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				loading: false,
				modalName: null,
				currId: '',
				startTime: '2019-11-23 00:00:00',
				courseList: [],
				query: '',
				userNumber: ''
			}
		},
		onLoad: function(option) {
			uni.request({
				url: 'http://localhost:8080/api/startTime',
				method: 'GET',
				data: {},
				success: res => {
					this.startTime = res.data
				},
				fail: () => {},
				complete: () => {}
			});
			let that = this;
			this.query = option.query
			uni.getStorage({
				key: 'userNumber',
				success: function(res) {
					that.userNumber = res.data
				}
			})
			uni.showLoading({
				title: '加载中...',
				mask: false
			});
			uni.request({
				url: 'http://localhost:8080/api/subjectList',
				method: 'POST',
				data: {
					query: this.query
				},
				success: res => {
					this.courseList = res.data;
					uni.hideLoading();
				},
				fail: () => {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				},
				complete: () => {}
			});
			setTimeout(function() {
				that.loading = true
			}, 500)
		},
		// onPullDownRefresh() {
		// 	uni.request({
		// 		url: 'http://localhost:8080/api/subjectList',
		// 		method: 'POST',
		// 		data: {
		// 			query: this.query
		// 		},
		// 		success: res => {
		// 			this.courseList = res.data;
		// 			uni.stopPullDownRefresh();
		// 		},
		// 		fail: () => {
		// 			uni.showToast({
		// 				title: '加载失败',
		// 				icon: 'none'
		// 			});
		// 		},
		// 		complete: () => {}
		// 	});
		// },
		methods: {
			downCallback(mescroll) {
				uni.request({
					url: 'http://localhost:8080/api/subjectList',
					method: 'POST',
					data: {
						query: this.query
					},
					success: res => {
						this.courseList = res.data;
						mescroll.endSuccess()
					},
					fail: () => {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					},
					complete: () => {}
				});
			},
			upCallback(mescroll) {},
			selectCourse(id, modelName) {
				var now = new Date();
				var start = new Date(this.startTime);
				if (now.getTime() < start.getTime()) {
					this.modalName = "TimeError";
				} else {
					this.modalName = modelName;
					this.currId = id;
				}

			},
			yes() {
				this.hideModal();
				uni.request({
					url: 'http://localhost:8080/api/selectSubject',
					method: 'POST',
					data: {
						query: this.query,
						userNumber: this.userNumber,
						sid: this.currId
					},
					success: res => {
						if (res.data.code == "00") {
							uni.showToast({
								title: res.data.message
							});
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none"
							});
						}
						uni.startPullDownRefresh({

						})
					},
					fail: () => {},
					complete: () => {}
				});

			},
			hideModal() {
				this.modalName = null;
			}
		},
		computed: {}
	}
</script>

<style>

</style>
